<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
            background-color: black;
        }

        .container {
            width: 500px;
            margin: 5% auto;
            transform-style: preserve-3d;
            -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 20%, rgba(255, 255, 255, 5));
        }

        .container img {
            width: 500px;
            height: 300px;
        }

        .text {
            width: 250px;
            font-size: 25px;
            color: white;
            text-align: center;
            margin: 17% auto;
        }
    </style>
   
</head>

<body>
    <div class="container"><img src="banner/april-10.jpg" alt=""></div>
    <div class="text"><span>我好像在哪看见过你</span></div>
     <script>
            const img = document.querySelector('.container img')
            const text = document.querySelector('.text span')
            let arr = [
                { url: 'banner/april-10.jpg', titel: '我好像在哪看见过你' },
                { url: 'banner/april-11.jpg', titel: '又见面啦！' },
                { url: 'banner/april-12.jpg', titel: '我有住进谁的心中吗？' },
                { url: 'banner/april-13.jpg', titel: '我有住进你的心中吗' },
                { url: 'banner/april-14.jpg', titel: '就算一点点也好' },
                { url: 'banner/april-15.jpg', titel: '你会想起我吗' }
            ]
            let k = 0
            
            let timer=setInterval(function () {
                k++
                if (k == 6) {
                    k = 0
                }
                img.src = arr[k].url
                text.innerHTML = arr[k].titel
            }, 2000)
            img.onmouseover=function(){
                clearInterval(timer);
            }
            img.onmouseout=function()
            {
                timer=setInterval(function () {
                k++
                if (k == 6) {
                    k = 0
                }
                img.src = arr[k].url
                text.innerHTML = arr[k].titel
            }, 2000)
            }

    </script>
</body>

</html>